<template>
	<el-dialog
		:title="orderRow.order_no + ' 订单发货'"
		v-model="dialogVisible"
		:append-to-body="true"
		:close-on-click-modal="false"
		width="1000px"
	>
		<el-form ref="form" :model="form" label-width="100px">
			<el-row>
				<el-col :span="24">
					<el-form-item label="收货信息">
						<div>
							{{ addressInfo.recipient_name }} / {{ addressInfo.recipient_mobile }} &nbsp;
						</div>
						<div>
							 {{ addressInfo.province }}{{ showCityText(addressInfo.city)}}{{ addressInfo.area }} {{ addressInfo.street }}
							{{ addressInfo.address }}
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="分批发货">
						<div v-if="orderRow.subs.length < 2" style="color: #b88230;">只有一个SKU，不允许分批发货</div>
						<div v-else>
							<el-switch v-model="form.is_split" :disabled="splitDisabled" />
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-show="form.is_split && yifahuo.length > 0">
					<el-form-item label="已发货子订单">
						<el-table :data="yifahuo" border>
							<el-table-column label="子订单">
								<template #default="scope">
									<goods-info-item :row="scope.row" type="order" :baseUrl="photoBaseUrl" />
								</template>
							</el-table-column>
							<el-table-column width="160" label="发货信息">
								<template #default="scope">
									<div>{{ scope.row.express_com }}</div>
									<div>{{ scope.row.express_sn }}</div>
								</template>
							</el-table-column>
							<el-table-column width="80" label="操作">
								<template #default="scope">
									<div>
										<el-button
											type="text"
											class="btn-link"
											@click="showExpress(scope.row.express_sn)"
											>查看物流</el-button
										>
									</div>
									<div>
										<el-button
											type="text"
											class="btn-link"
											@click="cancelExpress(scope.row.id)"
											>取消发货</el-button
										>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-show="form.is_split && weifahuo.length > 0">
					<el-form-item label="未发货子订单">
						<el-table
							:data="weifahuo"
							border
							@selection-change="weifahuoSelectionChange"
						>
							<el-table-column width="42" property="id" type="selection" />
							<el-table-column label="子订单">
								<template #default="scope">
									<goods-info-item :row="scope.row" type="order" :baseUrl="photoBaseUrl" />
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="快递公司">
						<el-select
							v-model="form.express_id"
							filterable
							clearable
							:disabled="isSend"
							placeholder="请选择快递公司"
						>
							<el-option
								v-for="(e, index) in expresss"
								:key="index"
								:label="e.name"
								:value="e.id"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="20">
					<el-form-item label="快递单号">
						<el-input v-model="form.express_sn" :disabled="isSend" />
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-button @click="showExpress(expresssInfo.express_sn)" v-show="isSend"
						>物流信息</el-button
					>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="closeDialog">取 消</el-button>
				<el-button
					type="warning"
					v-show="isSend"
					:loading="btnIsLoad"
					@click="cancelExpressAll"
					>取消发货</el-button
				>
				<el-button
					type="primary"
					v-show="form.is_split == false && !isSend"
					:loading="btnIsLoad"
					@click="sendOrder"
					>整单发货</el-button
				>
				<el-button
					type="primary"
					v-show="form.is_split"
					:disabled="splitSendStatus"
					:loading="btnIsLoad"
					@click="sendOrder"
					>{{ splitSendStatus ? "请勾选未发货子订单" : "发货选中子订单" }}</el-button
				>
			</div>
		</template>
	</el-dialog>
	<el-dialog title="物流信息" :append-to-body="true" v-model="orderExpressInfoDialogVisible">
		<order-express-info ref="orderExpressInfoDialogVisible" />
	</el-dialog>
</template>

<script>
import orderExpressInfo from "./orderExpressInfo.vue";
import "./common.scss";
export default {
	name: "order-send-express-dialog",
	components: {
		orderExpressInfo
	},
	props: {
		orderRow: { type: Object, default: () => {} }
	},
	emits: ["sendOrder"],
	data() {
		return {
			dialogVisible: false,
			orderExpressInfoDialogVisible: false,
			selections: [],
			expresss: [],
			btnIsLoad: false,
			photoBaseUrl: "",
			expresssInfo: {
				express_sn: ""
			},
			addressInfo: {
				recipient_name: "",
				recipient_mobile: "",
				province: "",
				city: "",
				area: "",
				street: "",
				address: "",
				zipcode: ""
			},
			form: {
				is_split: false,
				type: "send_express",
				order_id: 0,
				order_sub_ids: [],
				express_com: "",
				express_id: "",
				express_sn: ""
			}
		};
	},
	computed: {
		yifahuo() {
			return this.orderRow.subs.filter((item) => {
				return item.status >= 4;
			});
		},
		weifahuo() {
			return this.orderRow.subs.filter((item) => {
				return item.status < 4;
			});
		},
		splitSendStatus() {
			return this.selections.length < 1;
		},
		splitDisabled() {
			if (this.orderRow.subs.length < 2) {
				return true;
			}
			return this.yifahuo.length > 0;
		},
		isSend() {
			return this.orderRow.status === 4 && this.orderRow.is_split === 0;
		}
	},
	methods: {
		getPhotoBaseUrl(){
			let _this = this;
			this.$API.gdshop.attachment.getBaseUrl().then((res) => {
				if (res.code === 0) {
					_this.baseUrl = res.data.base_url;
				}
				else {
					_this.$message.error('getBaseUrl 失败,' + res.message);
				}
			});
		},
		getOrderAddressInfo() {
			let _this = this;
			this.$API.shop.order
				.getAddressInfo({ id: _this.orderRow.id })
				.then((res) => {
					if (res.code === 0) {
						_this.addressInfo = res.data;
					}
					else {
						_this.$message.error('getAddressInfo 失败,' + res.message);
					}
				});
		},
		async getExpresss() {
			let _this = this;
			if (this.expresss.length < 1) {
				let res = await this.$API.shop.express.list();
				if (res.code === 0) {
					_this.expresss = res.data;
				}
			}
		},
		async getOrderExpresss() {
			let res = await this.$API.shop.order.getExpressInfo({
				id: this.orderRow.id
			});
			if (res.code === 0) {
				this.expresssInfo = res.data;
				this.form.express_sn = this.expresssInfo.express_sn;
			}
		},
		// 打开发货窗口
		openSendOrderDialog() {
			this.getPhotoBaseUrl();
			this.getOrderAddressInfo();
			this.getExpresss();
			this.dialogVisible = true;
			this.form.is_split = this.orderRow.is_split > 0;
			// 如果主订单状态已经发货 status == 4 ，读取发货信息
			if (this.isSend) {
				this.getOrderExpresss();
			}
		},
		closeDialog(_isSendEmit = false) {
			this.dialogVisible = false;
			this.expresssInfo.express_sn = "";
			// 清除选中的子订单
			this.selections = [];
			if (_isSendEmit === true) {
				this.$emit("sendOrder", {
					// form: this.form,
					// order: this.order
				});
			}
		},
		/**
		 * 发货
		 */
		sendOrder() {
			this.confirmTip("send_express", "发货");
		},
		weifahuoSelectionChange(_s) {
			this.selections = _s;
		},
		confirmTip(_type, _text) {
			this.$confirm("确认 " + ' <span style="color:#F00">' + _text + " </span>吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				dangerouslyUseHTMLString: true,
				type: "warning"
			}).then(() => {
				this.sendData(_type, _text);
			});
		},
		sendData(_type, _text) {
			let _this = this;
			this.btnIsLoad = true;
			this.form.order_id = this.orderRow.id;
			this.form.type = _type;
			this.form.order_sub_ids = this.selections.map((item) => {
				return item.id;
			});
			let submitData = Object.assign(this.form, { is_split: this.form.is_split ? 1 : 0 });
			this.$API.shop.order
				.changeStatus(submitData)
				.then((res) => {
					/*_this.orderRow.status = res.status;
					_this.orderRow.is_split = res.is_split;
					_this.orderRow.subs = res.subs;*/
					if (res.code === 0) {
						_this.$message.success(_text + "成功");
						_this.closeDialog(true);
						_this.btnIsLoad = false;
					}
					else{
						_this.$message.error(res.message);
					}
				})
				.catch((err) => {
					console.log(err);
					_this.$message.error(err);
					_this.btnIsLoad = false;
				});
		},
		showExpress(express_sn) {
			console.log(express_sn);
			this.orderExpressInfoDialogVisible = true;
			this.$nextTick(function () {
				this.$refs["orderExpressInfoDialogVisible"].getExpressInfo(express_sn);
			});
		},
		cancelExpress(_orderSubId) {
			this.selections = this.orderRow.subs.filter((item) => {
				return item.id == _orderSubId;
			});
			this.confirmTip("cancel_express", "取消发货");
		},
		cancelExpressAll() {
			this.selections = [];
			this.confirmTip("cancel_express", "取消发货");
		},
		showCityText(_city) {
			if (_city === "不显示") {
				return " ";
			} else {
				return " " + _city + " ";
			}
		}
	}
};
</script>

<style scoped></style>
